<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {Location,Position} from "@element-plus/icons-vue";
import { Search } from '@element-plus/icons-vue'

let map = null;
let startCoordinate={};
let endCoordinate={};
let isStart=true;
let startMarker=null;
let endMarker=null;
let walking=null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "3e1f5f88e020ce5cfbe77388a3ae756d",
  };
  AMapLoader.load({
    key: "536d45bd438bb27608cf0a5021044b49", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 18, // 初始化地图级别
          center: [ 112.927508,  28.172351]// 初始化地图中心点位置
        });
        AMap.plugin("AMap.Walking", function () {
          walking = new AMap.Walking({
            //驾车路线规划策略，0是速度优先的策略
            policy: 0,
            //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上
            map: map,
            //panel 指定将结构化的路线详情数据显示的对应的 DOM 上，传入值需是 DOM 的 ID
            panel: "panel",
          });
//   var points = [
//     { keyword: "中南大学(地铁站)", city: "长沙" },
//     { keyword: "升华公寓12栋", city: "长沙" },
//   ];
//   //搜索完成后，将自动绘制路线到地图上
//   walking.search(points);
// });

          //输入提示
          var autoOptions = {
            input: "tipinput"
          };

          AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
            var auto = new AMap.AutoComplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
              map: map
            });  //构造地点查询类
            auto.on("select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
              placeSearch.setCity(e.poi.adcode);
              placeSearch.search(e.poi.name);  //关键字查询查询
            }
          });
          map.on('click', clickMapHandler)
          init()
        }).catch((e) => {
              console.log(e);
            });
      });
})

function init()
{
  let mark1 = new AMap.Marker({
            position: new AMap.LngLat(112.92894, 28.173322),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(mark1)
  var infoWindow1 = new AMap.InfoWindow({
    anchor: 'top-center',
    content: '学校食堂经济实惠',
    showShadow:true
});
  mark1.on('click', function () {
        infoWindow1.open(map, mark1.getPosition());
    });
  let mark2 = new AMap.Marker({
            position: new AMap.LngLat(112.929645,28.172781),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(mark2)
  var infoWindow2 = new AMap.InfoWindow({
    anchor: 'top-center',
    content: '超市物价偏高',
    showShadow:true
});
  //鼠标点击marker弹出自定义的信息窗体
    mark2.on('click', function () {
        infoWindow2.open(map, mark2.getPosition());
    });
    let mark3 = new AMap.Marker({
            position: new AMap.LngLat(112.927044,28.174277),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(mark3)
  var infoWindow3 = new AMap.InfoWindow({
    anchor: 'top-center',
    content: '商品丰富，物价较低',
    showShadow:true
});
  //鼠标点击marker弹出自定义的信息窗体
    mark3.on('click', function () {
        infoWindow3.open(map, mark3.getPosition());
    });
    let mark4 = new AMap.Marker({
            position: new AMap.LngLat(112.926075,28.173294),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(mark4)
  var infoWindow4 = new AMap.InfoWindow({
    anchor: 'top-center',
    content: '开学到这里取快递',
    showShadow:true
});
  //鼠标点击marker弹出自定义的信息窗体
    mark4.on('click', function () {
        infoWindow4.open(map, mark4.getPosition());
    });
    let mark5 = new AMap.Marker({
            position: new AMap.LngLat(112.92749,28.171083),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(mark5)
  var infoWindow5 = new AMap.InfoWindow({
    anchor: 'top-center',
    content: '可以进行各种体育运动',
    showShadow:true
});
  //鼠标点击marker弹出自定义的信息窗体
    mark5.on('click', function () {
        infoWindow5.open(map, mark5.getPosition());
    });
}
// 点击地图事件
function clickMapHandler(e){
  console.log(startCoordinate);
        //选择起点
        if (isStart){
          if (startMarker !== null){
            map.remove(startMarker)
          }
          startCoordinate.lon = e.lnglat.getLng()
          startCoordinate.lat = e.lnglat.getLat()

          //标点
          startMarker = new AMap.Marker({
            position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '起点',
            label: {
              content: '起点'
            }
          })
          // 将创建的点标记添加到已有的地图实例
          map.add(startMarker)
        }
        //选择终点
        else {
          if (endMarker !== null){
            map.remove(endMarker)
          }
          endCoordinate.lon = e.lnglat.getLng()
          endCoordinate.lat = e.lnglat.getLat()


          endMarker = new AMap.Marker({
            position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '终点',
            label: {
              content: '终点'
            }
          })
          map.add(endMarker)
        }
      }
function setDaoHang(e){
  map.remove(startMarker);
  map.remove(endMarker);
    //根据起终点坐标规划步行路线
    walking.search([startCoordinate.lon,startCoordinate.lat], [endCoordinate.lon,endCoordinate.lat], function(status, result) {
        // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
    });
}
onUnmounted(() => {
  map?.destroy();
})
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <input style="width: 300px;" id="tipinput" placeholder="输入搜索地点" />
      <el-button plain type="success" style="width: 120px;" @click="isStart = true"><el-icon><Location /></el-icon>选择起点</el-button>
      <el-button plain type="danger" style="width: 120px;" @click="isStart = false"><el-icon><Location /></el-icon>选择终点</el-button>
      <el-button plain type="primary" @click="setDaoHang"><el-icon><Position /></el-icon>开始导航</el-button>
    </div>
    <div id="container"></div>
    <div id="panel"></div>
  </div>

</template>

<style scoped>
.page-container {
  margin-top: 50px;
}
.page-header {
  position: fixed;
  z-index: 10;
  display: flex;
  gap: 50px;
  padding: 20px;
}
#container {
  width: 100%;
  height: 800px;
}
#panel {
      position: fixed;
      background-color: white;
      max-height: 90%;
      overflow-y: auto;
      top: 10px;
      right: 10px;
      width: 280px;
    }

    #panel .amap-call {
      background-color: #009cf9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    #panel .amap-lib-driving {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
    }
</style>
